import React from 'react';
import { GoodInfoProps } from './types';
import styled from './index.module.css';
import { replaceKeyowrds } from '@/views/utils';
export default function GoodInfo({ good }: GoodInfoProps) {
    return (
        <div className={styled.goodInfo}>
            <div className={styled.left}>
                <img src={'https://' + good?.media?.file} alt="" />
                <div className={styled.operate}>
                    <div className={styled.buy}>BUY IT NOW</div>
                    <div className={styled.cart}>
                        <i className="iconfont">&#xe726;</i>
                    </div>
                </div>
            </div>
            <div className={styled.right}>
                <div className={styled.title}>{good?.description}</div>
                <div className={styled.price}>
                    {good.price > 0 ? (
                        <>
                            <span style={{ color: 'red' }}>${good.price}</span>
                            <span
                                style={{
                                    textDecoration: 'line-through',
                                    marginLeft: '10px',
                                    color: '#6b7280',
                                }}
                            >
                                ${good.oldPrice}
                            </span>
                        </>
                    ) : (
                        <span style={{ color: 'red' }}>${good.oldPrice}</span>
                    )}
                </div>
                <div className={styled.keywords}>
                    <ul>
                        {good.keywords?.map((item, index) => {
                            return (
                                <li
                                    key={index}
                                    dangerouslySetInnerHTML={{
                                        __html: replaceKeyowrds(item),
                                    }}
                                >
                                    {}
                                </li>
                            );
                        })}
                    </ul>
                </div>
            </div>
        </div>
    );
}
